import React, { Component, useMemo } from 'react'
import PropTypes from 'prop-types';
import { defaultProps } from 'antd-mobile/es/components/pull-to-refresh/pull-to-refresh';

// export default class Vote extends Component {
//   // 初始化属性 & 规则校验
//   static defaultProps = {
//     supNum: 0,
//     oppNum: 0
//   }

//   static propTypes = {
//     supNum: PropTypes.number,
//     oppNum: PropTypes.number
//   }



//   render() {
//     let { supNum, oppNum } = this.props;
//     let total = supNum + oppNum,
//       ratio = '--';
//     if (total > 0) ratio = (supNum / total * 100).toFixed(2) + '%';
//     return (
//       <div className="main">
//         <p>支持人数：{supNum}人</p>
//         <p>反对人数：{oppNum}人</p>
//         <p>支持比率：{ratio}</p>
//       </div>
//     )
//   }
// }

export default function VoteMain({ supNum=0, oppNum=0 }) {
  
  let ratio = useMemo(() => {
    let total = supNum + oppNum;
    return total > 0 ? (supNum / total * 100).toFixed(2) + '%' : '--';
  }, [supNum, oppNum])

  return (
    <div className="main">
      <p>支持人数：{supNum}人</p>
      <p>反对人数：{oppNum}人</p>
      <p>支持比率：{ratio}</p>
    </div>
  )
}
VoteMain.propTypes = {
  supNum: PropTypes.number,
  oppNum: PropTypes.number
};
